<template>
	<div class="index">
		<div class="twoFlex flex">
			<div class="item flex">
				<div class="cardImage">
					<div class="one"></div>
					<div class="two"></div>
					<div class="three"></div>
				</div>
				<img src="/img/create_1.png" class="backgroundImage" />
				<div class="h3 ell">简易模式</div>
				<div class="desc ell">新手也能创建一首歌，让你的想法变成艺术！</div>
				<div class="btnFlex flex">
					<div class="btnItem flex">
						<span class="iconfont icon-xiangyou"></span>
						<span class="text">去生成</span>
					</div>
				</div>
			</div>
			<div class="item flex">
				<div class="cardImage">
					<div class="one"></div>
					<div class="two"></div>
					<div class="three"></div>
				</div>
				<img src="/img/create_2.png" class="backgroundImage" />
				<div class="h3 ell">高手模式</div>
				<div class="desc ell">将你的灵感瞬间转化为不朽的乐章</div>
				<div class="btnFlex flex">
					<div class="btnItem flex">
						<span class="iconfont icon-xiangyou"></span>
						<span class="text">去生成</span>
					</div>
				</div>
			</div>
		</div>
		<div class="filterView flex">
			<div class="navFlex flex">
				<div class="item active">最新</div>
				<div class="item">推荐</div>
			</div>
			<div class="searchFlex flex">
				<input placeholder="请输入音乐标题" />
				<div class="iconfont icon-sousuo"></div>
			</div>
		</div>
		<div class="tarFlex flex">
			<div class="item active">流行音乐</div>
			<div class="item">摇滚音乐</div>
			<div class="item">民谣</div>
			<div class="item">电子</div>
			<div class="item">舞曲</div>
			<div class="item">没毛病</div>
			<div class="item">刚子</div>
		</div>
		<div class="musicFlex flex">
			<nuxt-link class="musicItem flex" to="/index/detail/123" v-for="(item, index) in 15">
				<div class="cardImage">
					<div class="one"></div>
					<div class="two"></div>
					<div class="three"></div>
				</div>
				<div class="cover">
					<img src="https://api.sora13.com/images/aisora-c/120083/20240610/7d1a4341b592463f85365c7aecba38a4_0.jpg" />
				</div>
				<div class="info">
					<div class="h3 ell">如果爱忘了(Live)</div>
					<div class="desc ell">@hillsong Young</div>
				</div>
				<div class="btn iconfont icon-bofang2" @click.stop></div>
			</nuxt-link>
		</div>
		<div class="pageView">
			<el-pagination
				:total="50"
				layout="total, prev, pager, next, jumper"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		layout: 'index',
		head() {
			return {
				title: "AI音乐生成 - Suno AI音乐 | 专业生成音乐 创作平台",
				meta: [
					{
						name: 'description',
						content: 'AI音乐生成 - Suno AI音乐 | 专业生成音乐 创作平台'
					}
				]
			}
		},
		data() {
			return {
				
			}
		},
		asyncData({ app }) {
			
		},
		mounted(){
			
		},
	}
</script>

<style lang="scss" scoped>
	.index{
		.twoFlex{
			flex-direction: row;
			align-items: center;
			.item{
				border-radius: 15px;
				margin-right: 17px;
				flex: 1;
				width: 0;
				border: 0.5px solid rgba(171, 215, 255, .11);
				border-radius: 16px;
				position: relative;
				overflow: hidden;
				flex-direction: column;
				justify-content: center;
				padding: 0 30px;
				height: 180px;
				.h3{
					font-size: 24px;
					font-weight: bold;
					color: rgb(194, 215, 239);
					line-height: 1.2;
					position: relative;
					z-index: 1;
				}
				.desc{
					font-size: 15px;
					color: rgba(224, 245, 255, .6);
					line-height: 1.2;
					margin-top: 10px;
					position: relative;
					z-index: 1;
				}
				.btnFlex{
					flex-direction: row;
					align-items: center;
					margin-top: 23px;
					position: relative;
					z-index: 1;
					.btnItem{
						height: 44px;
						width: 200px;
						border-radius: 10px;
						background: rgba(214,241,255,.08);
						flex-direction: row;
						align-items: center;
						justify-content: center;
						transition: 0.2s all;
						cursor: pointer;
						margin-right: 16px;
						&:hover{
							background: #FFF;
							.iconfont{
								color: #3b4559;
								opacity: 1;
							}
							.text{
								color: #3b4559;
							}
						}
						.iconfont{
							font-size: 15px;
							color: #ebf8ff;
							margin-right: 9px;
							opacity: 0.6;
						}
						.text{
							font-weight: bold;
							font-size: 15px;
							color: #ebf8ff;
						}
					}
				}
			    .cardImage{
					height: 100%;
					left: 0;
					padding: 1px;
					position: absolute;
					top: 0;
					width: 100%;
				    .one{
						background: #506797;
						border-radius: 160.267px;
						filter: blur(120px);
						height: 244.407px;
						left: -122.5px;
						opacity: .4;
						position: absolute;
						top: -133.704px;
						width: 480px;
					}
					.two{
						border-radius: 200px;
						filter: blur(150px);
						opacity: .4;
						position: absolute;
						background: rgba(80, 103, 151, .6);
						bottom: -235.648px;
						height: 311.987px;
						right: -152.292px;
						transform: rotate(19.877deg);
						width: 311.987px;
					}
					.three{
						background: #506797;
						bottom: -83px;
						height: 160px;
						right: 277px;
						width: 262px;
						border-radius: 200px;
						filter: blur(150px);
						opacity: .4;
						position: absolute;
					}
			    }
				.backgroundImage{
					position: absolute;
					right: -30px;
					bottom: -40px;
					width: 170px;
					opacity: 0.3;
					transform: rotate(-20deg);
				}
				&:nth-last-child(1){
					margin-right: 0;
				}
			}
		}
		.filterView{
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin-top: 20px;
			.navFlex{
				flex-direction: row;
				align-items: center;
				.item{
					line-height: 50px;
					font-size: 17px;
					color: rgba(255,255,255,0.65);
					margin-right: 30px;
					position: relative;
					transition: 0.2s all;
					cursor: pointer;
					&:hover{
						opacity: 0.8;
					}
					&.active{
						font-size: 18px;
						color: rgba(255,255,255,0.9);
						font-weight: bold;
						&:after{
							content: "";
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							height: 2px;
							background: rgba(255,255,255,0.6);
							border-radius: 10px;
						}
					}
				}
			}
			.searchFlex{
				flex-direction: row;
				align-items: center;
				background: rgba(204,221,255,.06);
				padding: 11px 3px 11px 15px;
				border-radius: 10px;
				// border: 0.5px solid rgba(184,221,255,.12);
				width: 260px;
				input{
					outline: none;
					background: none;
					border: 0;
					line-height: 20px;
					height: 20px;
					font-size: 15px;
					color: #fff;
					flex: 1;
					width: 0;
					&::-webkit-input-placeholder{
						color: rgba(255,255,255,0.5);
					}
				}
				.iconfont{
					line-height: 20px;
					font-size: 20px;
					color: rgba(255,255,255,0.8);
					padding: 0 12px;
					cursor: pointer;
					transition: 0.2s all;
					&:hover{
						opacity: 0.8;
					}
				}
			}
		}
		.tarFlex{
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 15px;
			.item{
				border-radius: 7px;
				margin-right: 13px;
				margin-bottom: 13px;
				font-size: 14px;
				color: rgba(224,245,255,.6);
				line-height: 33px;
				padding: 0 18px;
				background: rgba(204,221,255,.06);
				// border: 0.5px solid rgba(184,221,255,.12);
				transition: 0.2s all;
				cursor: pointer;
				&:hover{
					opacity: 0.8;
				}
				&.active{
					background: rgba(204,221,255,.18);
					color: #ddeaff;
				}
			}
		}
		.musicFlex{
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 5px;
			.musicItem{
				padding: 20px 20px;
				width: calc((100% - 15px * 2) / 3);
				margin-right: 15px;
				margin-bottom: 15px;
				// border: 0.5px solid rgba(171, 215, 255, .15);
				border-radius: 16px;
				position: relative;
				overflow: hidden;
				flex-direction: row;
				align-items: center;
				.cardImage{
					height: 100%;
					left: 0;
					padding: 1px;
					position: absolute;
					top: 0;
					width: 100%;
					.one{
						background: #506797;
						border-radius: 160.267px;
						filter: blur(120px);
						height: 244.407px;
						left: -122.5px;
						opacity: .15;
						position: absolute;
						top: -133.704px;
						width: 480px;
					}
					.two{
						border-radius: 200px;
						filter: blur(150px);
						opacity: .4;
						position: absolute;
						background: rgba(80, 103, 151, .4);
						bottom: -235.648px;
						height: 311.987px;
						right: -152.292px;
						transform: rotate(19.877deg);
						width: 311.987px;
					}
					.three{
						background: #506797;
						bottom: -83px;
						height: 160px;
						right: 277px;
						width: 262px;
						border-radius: 200px;
						filter: blur(150px);
						opacity: .2;
						position: absolute;
					}
				}
				.cover{
					position: relative;
					z-index: 2;
					width: 90px;
					height: 90px;
					border-radius: 7px;
					overflow: hidden;
					cursor: pointer;
					img{
						width: 100%;
						height: 100%;
						border-radius: 7px;
						transition: 0.2s all;
						&:hover{
							transform: scale(1.05);
						}
					}
				}
				.info{
					position: relative;
					z-index: 2;
					flex: 1;
					width: 0;
					margin-left: 15px;
					.h3{
						color: #ebf8ff;
						font-size: 17px;
						font-weight: bold;
						line-height: 20px;
						cursor: pointer;
						transition: 0.2s all;
						&:hover{
							opacity: 0.8;
						}
					}
					.desc{
						color: rgba(224, 245, 255, 0.6);
						font-size: 14px;
						line-height: 20px;
						margin-top: 9px;
						cursor: pointer;
						transition: 0.2s all;
						&:hover{
							opacity: 0.8;
						}
					}
				}
				.btn{
					position: relative;
					z-index: 2;
					color: rgba(235,248,255,0.7);
					margin-left: 15px;
					line-height: 40px;
					width: 40px;
					text-align: center;
					font-size: 18px;
					background: rgba(255,255,255,0.04);
					border-radius: 100px;
					padding-left: 2px;
					cursor: pointer;
					transition: 0.2s all;
					&:hover{
						transform: scale(1.05);
						opacity: 0.8;
					}
				}
				@media screen and (min-width: 1921px) {
					width: calc((100% - 15px * 3) / 4);
					&:nth-child(4n){
						margin-right: 0;
					}
				}
				@media screen and (max-width: 1920px) {
					width: calc((100% - 15px * 2) / 3);
					&:nth-child(3n){
						margin-right: 0;
					}
				}
			}
		}
		.pageView{
			padding-bottom: 15px;
		}
	}
</style>